<template>
  <el-main class="bg edit_wrap question_edit_wrap">
    <el-form
      :model="form"
      ref="ruleFormRef"
      :rules="rules"
      label-width="auto"
      class="edit_question_form"
      size="large"
    >
      <el-row class="row_e">
        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="类型" prop="type">
            <el-select v-model="form.type">
              <el-option value="" label="">请选择</el-option>
              <el-option value="单选题" label="单选题">单选题</el-option>
              <el-option value="多选题" label="多选题">多选题</el-option>
              <el-option value="判断题" label="判断题">判断题</el-option>
              <el-option value="填空题" label="填空题">填空题</el-option>
              <el-option value="主观题" label="主观题">主观题</el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="题目" prop="title">
            <el-input v-model="form.title" placeholder="请输入题目"></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="选项" prop="question_item">
            <el-input
              type="textarea"
              v-model="form.question_item"
              placeholder="输入问题选项，如：
					A.正确
					B.错误"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="参考答案" prop="answer">
            <el-input
              v-model="form.answer"
              placeholder="请输入参考答案，如：A.正确,多个选项用|分隔"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="分值" prop="score">
            <el-input-number v-model="form.score"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="排序" prop="question_order">
            <el-input-number v-model="form.question_order"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="footer">
        <el-button type="primary" @click="Onsubmit" size="large"
          >提交</el-button
        >
        <el-button @click="cancel()" size="large">取消</el-button>
      </div>
    </el-form>
  </el-main>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, onMounted } from "vue";
import { $post, $get } from "@/api/Api.js";
import storageHelper from "@/libs/StorageHelper";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  $fullUrl,
  formatDate,
  $banseUrl,
  $check_action,
  $getUrlParams,
} from "@/utils/utils.js";
let router = useRouter();
let store = useStore();
let token = storageHelper.getToken() || null;
let UserInfo = storageHelper.getUserInfo();
let exam_id = $getUrlParams().exam_id;
let exam_question_id = $getUrlParams().exam_question_id;
let user_group = storageHelper.getUserInfo().user_group;
let user_id = storageHelper.getUserInfo().user_id;
let url_add = ref("/api/exam_question/add");
let url_set = ref("/api/exam_question/set");
let url_get_obj = ref("/api/exam_question/get_obj");
let title = ref("exam_question");
let field = ref("exam_question_id");
let form = ref({
  exam_question_id: 0,
  type: "",
  title: "",
  question_item: "",
  answer: "",
  score: 0,
  question_order: 0,
  exam_id: exam_id,
});

let ruleFormRef = ref(null);
let rules = ref({
  title: [
    {
      required: true,
      message: "题目不能为空",
      trigger: "blur",
    },
  ],
});

// 点击取消
let cancel = () => {
  router.go(-1);
};
// 点击提交
let Onsubmit = async () => {
  let valid = await ruleFormRef.value.validate();
  if (valid) {
    if (exam_question_id) {
      // 编辑
      $post(
        url_set.value + "?exam_question_id=" + exam_question_id,
        form.value
      ).then((res) => {
        if (res.result) {
          let exam_id= form.value.exam_id
          ruleFormRef.value.resetFields();
          router.push("./question_table?exam_id=" + exam_id);
          ElMessage.success("提交成功！");
        } else if (res.error) {
          ElMessage.error(res.error.message);
        }
      });
    } else {
      //创建一个试题库
      $post(url_add.value, form.value).then((res) => {
        if (res.result) {
          ruleFormRef.value.resetFields();
          router.push("./question_table?exam_id=" + exam_id);
          ElMessage.success("提交成功！");
        } else if (res.error) {
          ElMessage.error(res.error.message);
        }
      });
    }
  } else {
    ElMessage.error(msg);
  }
};
// 获取详情
let get_question_obj = async () => {
  var list = await $get(
    url_get_obj.value + "?exam_question_id=" + exam_question_id
  );
  form.value = list.result.obj;
};

onMounted(() => {
  if(exam_question_id){
	get_question_obj();
  }
});
</script>

<style scoped lang="less">
.diy_edit {
  width: 100%;
  .edit_question_form {
    max-width: 60%;
    margin: 90px auto;
    .fn {
      width: 100%;
    }
  }
  img {
    width: 100px;
    height: 100px;
  }
  .edit_list_question_sell {
    width: 80%;
    margin: 90px auto;
  }
  .footer {
    text-align: center;
  }
}
</style>
